import { getYMD, getNowFormatDate, compareObject } from '../../../../assets/js/util.js'
import tabelHead from './tabelHead.vue'
export default {
    data() {
        return {
            title: '分时留存',
            xlsxTitle: "",
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            nowDate: getNowFormatDate(),
            date: getYMD(-1),
            searchDate: getYMD(-1),
            loading: false,
            searchable: false,
            TableShow1: true,
            TableShow2: true,
            TableShow3: true,
            add: 0,
            flow: '',
            pickerOptions: {
                disabledDate(time) {
                    if (time.getTime() < Date.now() - (8.64e7 * 30) || time.getTime() > Date.now()) {
                        return time.getTime();
                    }
                }
            },
            dialogFormVisible: false,
            formLabelWidth: '100px',
            platLists: [],
            chanLists: [],
            chanLists1: [],
            servLists: [],
            servLists1: [],
            /*realTimeServiceContent 的宽*/
            realTimeServiceContent: '100%',
            /*表的宽度*/
            realTimeServiceTableWidth: "100%",
            /*数据表头*/
            platListTabelHead: [
                { prop: '1', label: '00:00~00:59-新增' },
                { prop: '2', label: '00:00~00:59-次留' },
                { prop: '3', label: '01:00~01:59-新增' },
                { prop: '4', label: '01:00~01:59-次留' },
                { prop: '5', label: '02:00~02:59-新增' },
                { prop: '6', label: '02:00~02:59-次留' },
                { prop: '7', label: '03:00~03:59-新增' },
                { prop: '8', label: '03:00~03:59-次留' },
                { prop: '9', label: '04:00~04:59-新增' },
                { prop: '10', label: '04:00~04:59-次留' },
                { prop: '11', label: '05:00~05:59-新增' },
                { prop: '12', label: '05:00~05:59-次留' },
                { prop: '13', label: '06:00~06:59-新增' },
                { prop: '14', label: '06:00~06:59-次留' },
                { prop: '15', label: '07:00~09:59-新增' },
                { prop: '16', label: '07:00~09:59-次留' },
                { prop: '17', label: '08:00~08:59-新增' },
                { prop: '18', label: '08:00~08:59-次留' },
                { prop: '19', label: '09:00~09:59-新增' },
                { prop: '20', label: '09:00~09:59-次留' },
                { prop: '21', label: '10:00~10:59-新增' },
                { prop: '22', label: '10:00~10:59-次留' },
                { prop: '23', label: '11:00~11:59-新增' },
                { prop: '24', label: '11:00~11:59-次留' },
                { prop: '25', label: '12:00~12:59-新增' },
                { prop: '26', label: '12:00~12:59-次留' },
                { prop: '27', label: '13:00~13:59-新增' },
                { prop: '28', label: '13:00~13:59-次留' },
                { prop: '29', label: '14:00~14:59-新增' },
                { prop: '30', label: '14:00~14:59-次留' },
                { prop: '31', label: '15:00~15:59-新增' },
                { prop: '32', label: '15:00~15:59-次留' },
                { prop: '33', label: '16:00~16:59-新增' },
                { prop: '34', label: '16:00~16:59-次留' },
                { prop: '35', label: '17:00~17:59-新增' },
                { prop: '36', label: '17:00~17:59-次留' },
                { prop: '37', label: '18:00~18:59-新增' },
                { prop: '38', label: '18:00~18:59-次留' },
                { prop: '39', label: '19:00~10:59-新增' },
                { prop: '40', label: '19:00~10:59-次留' },
                { prop: '41', label: '20:00~20:59-新增' },
                { prop: '42', label: '20:00~20:59-次留' },
                { prop: '43', label: '21:00~21:59-新增' },
                { prop: '44', label: '21:00~21:59-次留' },
                { prop: '45', label: '22:00~22:59-新增' },
                { prop: '46', label: '22:00~22:59-次留' },
                { prop: '47', label: '23:00~23:59-新增' },
                { prop: '48', label: '23:00~23:59-次留' }
            ],
            /*当前页显示数量*/
            pageSize1: 10,
            /*每页显示的数量*/
            pageSizes1: [10, 20, 50],
            /*dataTotal表数量*/
            dataTotal1: 0,
            /*分页器*/
            currentPage1: 1,

            /*当前页显示数量*/
            pageSize2: 10,
            /*每页显示的数量*/
            pageSizes2: [10, 20, 50],
            /*dataTotal表数量*/
            dataTotal2: 0,
            /*分页器*/
            currentPage2: 1,

        }
    },
    components: {
        tabelHead
    },
    computed: {
        // xlsx() {
        //     return this.title + '.xlsx'
        // }
    },
    methods: {
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        ifTableShow1() {
            this.TableShow1 = !this.TableShow1;
        },
        ifTableShow2() {
            this.TableShow2 = !this.TableShow2;
        },
        ifTableShow3() {
            this.TableShow3 = !this.TableShow3;
        },
        dateChange(val) {
            this.date = val;
        },
        // 分页器
        // 控制每页的数量
        handleSizeChange1(val) {
            this.pageSize1 = val;
            this.tableControl1();
        },
        // 页数
        handleCurrentChange1(val) {
            this.currentPage1 = val;
            this.tableControl1();
        },
        tableControl1() {
            this.chanLists1 = this.chanLists.slice((this.currentPage1 - 1) * this.pageSize1, this.currentPage1 * this.pageSize1)
        },
        // 分页器
        // 控制每页的数量
        handleSizeChange2(val) {
            this.pageSize2 = val;
            this.tableControl2();
        },
        // 页数
        handleCurrentChange2(val) {
            this.currentPage2 = val;
            this.tableControl2();
        },
        tableControl2() {
            this.servLists1 = this.servLists.slice((this.currentPage2 - 1) * this.pageSize2, this.currentPage2 * this.pageSize2)
        },
        loads() {
            this.loading = !this.loading; //加载中
            this.searchable = !this.searchable; //查询按钮不可用
        },
        //查询按钮
        search(form) {
            if (this.date == undefined || this.date.length < 0) {
                this.errorFun('请完善输入的值！');
                this.date = getNowFormatDate()
                return false;
            } else {
                this.searchDate = this.date
                this.getData(this.searchDate)
            }
        },
        // 表格下载
        excel(tabelHead, data, val) {
            var that = this;
            var str = '';
            if (val === '实时数据-分时留存-分平台实时账号留存') {
                str = { prop: '0', label: '平台' };
            } else if (val === '实时数据-分时留存-分渠道实时账号留存') {
                str = { prop: '0', label: '渠道' };
            } else if (val === '实时数据-分时留存-分区服实时账号留存') {
                str = { prop: '0', label: '区服' };
            }
            tabelHead.unshift(str);
            that.xlsxTitle = val + "-" + that.date;
            that.downloadExl(tabelHead, data, that.xlsxTitle, val);
            tabelHead.shift(str);
        },
        /*获取数据*/
        getData(date) {
            this.loads();
            this.$http.jsonp(`${this.SRC}data/get.do?p=${this.DP.p}&f=${this.DP.f}&a=search`, {
                params: { 'ps': `date=${date}` }
            }).then(function(res) {
                // console.log(res.body)
                var data = JSON.parse(JSON.parse(res.body));
                this.loads()
                if (parseInt(data['res']) === 0) {
                    if (data.platList.length == 0) {
                        this.platLists = [];
                        this.chanLists = [];
                        this.servLists = [];
                        this.errorFun('暂无数据！')
                        return;
                    }
                    if (data.platList.length > 0) {
                        this.platLists = [];
                        this.platList(data);
                    }
                    if (data.chanList.length > 0) {
                        this.chanLists = [];
                        this.chanLists = data.chanList
                        this.dataTotal1 = this.chanLists.length;
                        this.tableControl1();
                    }
                    if (data.servList.length > 0) {
                        this.servLists = [];
                        this.servList(data);
                        this.tableControl2();
                    }

                } else {
                    this.getErrorMsg(Number(data.res))
                }
            })
        },
        platList(data) { //渲染platList
            var temp1 = this._pushData(data.platList[0]);
            var temp2 = this._pushData(data.platList[1]);
            this.platLists.push(temp1);
            this.platLists.push(temp2);
            if (data.platList.length > 2) {
                var temp3 = this._pushData(data.platList[2]);
                this.platLists.push(temp3)
            }
        },
        servList(data) { //渲染servList
            var temp1 = this._pushData(data.servList[0]);
            this.servLists.push(temp1)
            for (var i = 1, len = data.servList.length; i < len; i++) {
                var temp2 = this._pushData(data.servList[i]);
                this.servLists.push(temp2)
            }
            this.dataTotal2 = this.servLists.length;

        },
        _pushData(arr) {
            if (arr === undefined) {
                return {}
            }
            var obj = {}
            for (var i = 0, len = arr.length; i < len; i++) {
                obj[i] = arr[i]
            }
            return obj
        },
        /*设置初始值*/
        _init() {
            window.addEventListener('resize', function() {
                /*修改表格的宽度*/
                this.realTimeServiceTableWidth = document.body.clientWidth - 240 + "px";
                this.realTimeServiceContent = document.body.clientWidth - 220 + "px";
            }.bind(this))
        },
        // 表格排序
        sortChange(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.chanLists.sort(compareObject(column.prop, false));
            } else { //正序
                this.chanLists.sort(compareObject(column.prop, true));
            }
            this.tableControl1();
        },
        // 表格排序
        sortChange2(column) {
            if (column.prop === null) {
                return;
            } else if (column.order === 'descending') {
                this.servLists.sort(compareObject(column.prop, false));
            } else { //正序
                this.servLists.sort(compareObject(column.prop, true));
            }
            this.tableControl2();
        }
    },
    mounted() {
        this._init()
            // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        this.getData(this.date)
    }
}